import { requestPost } from '@/api/system/common'
import { mapGetters } from 'vuex'

/**
 * 辅助线相关设置项
 * @type {{}}
 */
export const divider = {
  props: {
    data: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters(['imagesUploadApi'])
  },
  data() {
    return {
      loading: false,
      status: [
        { id: 0, value: false, label: '否' },
        { id: 1, value: true, label: '是' }
      ],
      fileList: [], // 图片上传时图片列表
      form: {
        content: '', // 内容
        type: 1, // 类型
        fontSize: 16 // 文字大小
      }
    }
  },
  watch: {
    data: {
      handler(newName, oldName) {
        if (undefined !== newName) {
          if (undefined !== newName.pzx && newName.pzx !== '' && newName.pzx !== null) {
            this.form = JSON.parse(newName.pzx)
            this.fileList = []
            if (this.form.type === 1) {
              const val = { url: this.form.content }
              this.fileList.push(val)
            }
          }
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    save() {
      this.loading = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.data.pzx = JSON.stringify(this.form)
          requestPost('rest/api/temp/v1/column/manager/update/entity', this.data).then(res => {
            this.close()
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    onSuccess(response, file, fileList) {
      this.fileList = []
      this.form.content = response.url
      this.fileList.push(response)
    },
    close() {
      this.loading = false
      Object.assign(this.$data.form, this.$options.data.call(this).form)
      this.dialogFormVisible = false
      this.$emit('fetch-data')
    }
  }

}
